<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			body {
				margin: 0;
			}

			ul {
				margin: 0;
				padding: 0;
				list-style: none;
			}

			.in img {
				width: 900px;
				height: 500px;

			}
		</style>
	</head>
	<body>
		<ul class="list">
			<li class="in"><img src="" alt="测试" data-src="./images/1.jpg"></li>
			<li class="in"><img src="" alt="测试" data-src="./images/2.jpg"></li>
			<li class="in"><img src="" alt="测试" data-src="./images/3.jpg"></li>
			<li class="in"><img src="" alt="测试" data-src="./images/4.jpg"></li>
			<li class="in"><img src="" alt="测试" data-src="./images/5.jpg"></li>
			<li class="in"><img src="" alt="测试" data-src="./images/1.jpg"></li>
			<li class="in"><img src="" alt="测试" data-src="./images/2.jpg"></li>
			<li class="in"><img src="" alt="测试" data-src="./images/3.jpg"></li>
			<li class="in"><img src="" alt="测试" data-src="./images/4.jpg"></li>
			<li class="in"><img src="" alt="测试" data-src="./images/5.jpg"></li>
		</ul>
	</body>
	<script>
		window.onload = function() {
			// 获取文档中 所有带有（img）标签名的对象的集合:
			// getElementsByTagName() 方法可返回带有指定标签名的对象的集合
			var imgs = document.getElementsByTagName('img');

			// 获取到当前img标签距离浏览器顶部的距离
			function getTop(e) {
				return e.offsetTop;
			}

			// 懒加载实现
			function lazyload(imgs) {
				// 可视区域高度
				// window.innerHeight 返回窗口的文档显示区的高度。
				var h = document.documentElement.clientHeight;
				// 滚动区域高度
				// 获取 位于页面最顶端 和 可见内容区域的 最顶端之间 的距离   
				// 2种方式 原因：部分浏览器不识别document.documentElement.scrollTop
				// scrollTop获取的值只可能是一个所以用 ||(或者) 取其中能识别出来的一个		
				var s = document.documentElement.scrollTop || document.body.scrollTop;
				// 循环 获取的返回img标签名对象的集合
				for (var i = 0; i < imgs.length; i++) {
					//判断 图片距离顶部的距离大于可视区域和滚动区域之和时 懒加载
					if ((h + s) > getTop(imgs[i])) {
						// 获取自定义属性data-src，用真图片替换假图片
						// getAttribute() 方法返回指定属性名的属性值。
						imgs[i].src = imgs[i].getAttribute('data-src')
					}
				}
			}
			lazyload(imgs);
			// 滚动条函数
			window.onscroll = function() {
				lazyload(imgs);
			}
		}
	</script>
</html>